<!--
 * @Version: 1.0
 * @Date: 2021-04-25 14:54:43
 * @LastEditTime: 2021-04-26 09:59:05
 * @Description:物流付款单详情
-->
<template>
  <div v-loading="loadingInfo">
    <el-form :model="formData" inline label-width="150px">
      <div class="header_title_box">
        <h2 style="margin-right:50px">
          基本信息
        </h2>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="付款编号：">
            <span>{{ formData.payaway_order_no }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流公司：">
            <span>{{ formData.logistics_company }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="应付金额(USD)：">
            <span>{{ formData.payaway_amount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际付款日期：">
            <span>{{ formData.pay_time ? formData.pay_time : '-' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际付款金额：">
            <span>{{ formData.payaway_amount_real !== '0' ? formData.payaway_amount_real : '-' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审核状态：">
            <span>{{ formData.status_text }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请状态：">
            <span>{{ formData.payaway_status === 0 ? '待付款' : '已付款' }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <div class="header_title_box">
        <h2 style="margin-right:50px">
          付款单明细
        </h2>
      </div>
      <div>
        <el-table :data="formData.transportList">
          <el-table-column align="center" label="运单号" prop="transport_order_no" width="170" />
          <el-table-column align="center" label="物流费用(USD)" prop="total_fee" />
          <el-table-column align="center" label="所属物流公司" prop="logistics_company" />
          <el-table-column align="center" label="物流公司结算周期(天)" prop="settlement_cycle" />
          <el-table-column align="center" label="所属发货单" prop="invoice_order_no" width="170" />
          <el-table-column align="center" label="发货日期" prop="send_at_text" width="130" />
          <el-table-column align="center" label="应付金额" prop="total_fee" />
          <el-table-column align="center" label="预计付款时间" idth="150">
            <template slot-scope="scope">
              {{ scope.row.delivey_day }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="申请付款状态" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status===1? '待申请': '已申请' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="付款单号" prop="payaway_order_no" width="170" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LogisticsInfo',
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {},
      loadingInfo: false
    }
  },
  created() {
    this.loadingInfo = true
    this.orderInfo()
  },
  methods: {
    orderInfo() {
      this.$http.get(`/logisticsPayawayOrder/${this.id}`).then((res) => {
        if (res.code === 10000) {
          const dataObj = res.data
          dataObj.transportList = dataObj.transportList.map((arr) => {
            arr.delivey_day = this.dateChange(arr.settlement_cycle, arr.send_at_text)
            return arr
          })
          this.formData = dataObj
          this.loadingInfo = false
        }
      }).catch(() => {
        this.loadingInfo = false
      })
    },
    dateChange(num = 1, date = false) {
      if (!date) {
        date = new Date()// 没有传入值时,默认是当前日期
        date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      }
      date += ' 00:00:00'// 设置为当天凌晨12点
      date = Date.parse(new Date(date)) / 1000// 转换为时间戳
      date += (86400) * num// 修改后的时间戳
      var newDate = new Date(parseInt(date) * 1000)// 转换为时间
      return newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
